<template>
  <div id="login">
      <div class="block lb">
          <el-carousel height="650px" autoplay>
            <el-carousel-item>
              <span class="demonstration">信息数据实时更新</span>
              <img src="@/public/login/lb-1.png" alt="">
            </el-carousel-item>
            <el-carousel-item>
              <span class="demonstration">订单信息实时处理</span>
              <img src="@/public/login/lb-2.png" alt="">
            </el-carousel-item>
            <el-carousel-item>
              <span class="demonstration">房型信息实时处理</span>
              <img src="@/public/login/lb-3.png" alt="">
            </el-carousel-item>
          </el-carousel>
      </div>
       <div class="form-box">
        <div class="form-content">
          <p class="form-title">
           欢迎登录好客超级酒店平台
          </p>
          <el-input placeholder="请输入用户名" prefix-icon="iconfont  icon-user" size="large" clearable v-model="form.account" ref="userName"  @keyup.enter.native="login">
          </el-input>
          <el-input placeholder="请输入密码" prefix-icon="iconfont  icon-password" size="large" clearable type="password" class="password" v-model="form.password" @keyup.enter.native="login">
          </el-input>
          <el-button type="primary" @click="login" class="login">登录</el-button>
           <div style="font-size:12px;padding-top:2px;color:#999">版本：{{version}}</div>
        </div>
      </div>
  </div>
</template>

<script>
import base from '../config.js'
export default {
  name: 'login',
  data () {
    return {
      form: {
        account: '',
        password: '',
        version:''
      }
    }
  },
  mounted () {
  },
  created(){
     this.version = base.version
  },
  methods: {
    login () {
      const data = Object.assign({}, this.value, {account: this.form.account, password: this.form.password})
      this.$http.post('/admin/user/login', data).then(res => {
        if (res.data.errCode === 0) {
          window.commo.token = res.data.adminToken.token
          sessionStorage.setItem('token', res.data.adminToken.token)
          sessionStorage.setItem('companyId', res.data.adminUserEntity.company)
          sessionStorage.setItem('accountEditId', res.data.adminToken.adminUserId)
          const fnData = JSON.stringify(res.data.adminRoleMenuEntities)
          sessionStorage.setItem('Menu', fnData)
          sessionStorage.setItem('account', res.data.adminUserEntity.account)
          sessionStorage.setItem('name', res.data.adminUserEntity.name)
          sessionStorage.setItem('userId',res.data.adminToken.adminUserId)
          sessionStorage.setItem('initActive','1.1')
          this.$router.push('/index/order_form')
        } else {
          this.$message.error(res.data.errMsg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
body {
    font-size: 14px;
    font-family: "微软雅黑"
}
#login {
  position: absolute;
  width:100%;
  height:100%;
  background: url('../public/login/login-bg.png') no-repeat 0 0;
  background-size: 100% 100%;
  .lb{
    width:941px;
    position: absolute;
    left:5%;
    bottom:10%;
    .demonstration{
      color:rgba(255,255,255,1);
      font-size:24px;
      padding-bottom: 42px;
      text-align: center;
      display: block;
    }
    .el-carousel__indicator{
      padding-right:30px;
    }
    .el-carousel__button{
      background:rgba(230,230,230,1);
      height:8px;
      border-radius: 4px;
      width:24px;
    }
    .el-carousel__indicator.is-active button{
      background:rgba(109,35,119,1);
    }
  }
  .form-box {
      position: absolute;
      z-index: 1111;
      width: 400px;
      height: 384px;
      margin: 0 auto;
      background:rgba(255,255,255,1);
      border-radius: 5px;
      text-align: center;
      box-sizing: border-box;
      bottom: 20%;
      right:5%;
      .form-content {
        width: 320px;
        margin: 0 auto;
        .form-title {
          padding:30px 0 50px 0;
          font-size: 18px;
          color:rgba(109,35,119,1);
          box-sizing: border-box;
        }
        .el-input__inner {
          height: 44px;
          font-size: 14px;
          padding-left: 40px;
          border-radius: 22px;
        }
        .el-input__inner:focus + .el-input__prefix > i {
           color:rgba(109,35,119,1);
        }
        .el-input.is-active .el-input__inner, .el-input__inner:focus{
          border-color:rgba(109,35,119,1)
        }
        .el-input__icon.iconfont {
          font-size: 20px;
          line-height: 44px;
          margin-left: 5px;
        }
        .password {
          margin-top: 40px;
        }
        .info{
          font-size:16px; 
          font-family:PingFang-SC-Regular;
          color:rgba(153,153,153,1);
          padding-top:30px;
        }
        .el-button--primary {
          height: 44px;
          font-size: 14px;
          width: 100%;
          margin-top: 30px;
          border-radius: 22px;
          background:rgba(109,35,119,1);
          border:none;
        }
      }  
    }
 }
</style>
